<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑用户</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        .container { width: 80%; margin: 0 auto; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .layui-form-select dl {
            max-height: 300px;
            z-index: 999;
        }

        .layui-input-inline {
            width: 250px !important;
        }

        .layui-form-select .layui-input {
            padding-right: 30px;
        }

        .layui-form-select dl dd {
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form id="userForm" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required lay-verify="required|username" class="layui-input" value="{{ user.name }}" maxlength="16" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <select id="role" name="role" required lay-verify="required" class="layui-input">
                        <option value=1 {% if user.role == '1' %}selected{% endif %}>管理员</option>
                        <option value=2 {% if user.role == '2' %}selected{% endif %}>操作员</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="customerIdContainer">
                <label class="layui-form-label">所属企业</label>
                <div class="layui-input-inline">
                    <select id="customer_id" name="customer_id" required lay-verify="required" lay-search class="layui-input">
                        <option value="">请选择企业</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" id="phone" name="phone" class="layui-input" value="{{ user.phone }}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="email" id="email" name="email" class="layui-input" value="{{ user.email }}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" id="remark" name="remark" class="layui-input" value="{{ user.remark }}">
                </div>
            </div>
        </form>
    </div>

    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['form', 'layer', 'jquery'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 自定义表单验证规则
            form.verify({
                username: function(value, item){
                    if (value.length < 2) {
                        return '用户名长度至少2个字符';
                    }
                }
            });

            // 获取企业列表并填充下拉框
            $.ajax({
                url: '/getCustomers',
                type: 'GET',
                success: function(response) {
                    var select = $('#customer_id');
                    if (response.code === 0 && response.data && response.data.length > 0) {
                        response.data.forEach(function(item) {
                            var option = new Option(item.name, item.id);
                            // 如果是当前用户的企业ID，设置为选中
                            if (item.id == {{ user.customer_id }}) {
                                option.selected = true;
                            }
                            select.append(option);
                        });
                        form.render('select');
                    } else {
                        layer.msg('获取企业列表失败：数据格式不正确');
                    }
                },
                error: function(xhr, status, error) {
                    layer.msg('获取企业列表失败：' + error);
                }
            });
        });
    </script>
</body>
</html>